<!-- 首页mini日历 -->
<style lang="scss" >
    @import './calendar.scss';
</style>
<template>
  <div class="pro-crm-home-calendar">
    <el-card
      v-show="rendered"
      class="box-card"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <div
          @click="showCal()"
          class="calendar-show"
        >
          {{ $t('_calendar.schedule') }} <i
            class="fa fa-calendar"
            style="color:#d0cdc7; "
          />
        </div>
        <div
          @click="editCal()"
          class="calendar-add"
        >
          + {{ $t('create') }}
        </div>
      </div>
      <div class="calendar-body">
        <!-- 年份 月份 -->
        <section class="calendar-month">
          <span
            @click="prevMonth()"
            class="prevMonth"
          >❮</span>
          <div class="text">
            {{ getYearEn(currentMonth) }}
          </div>
          <span
            @click="nextMonth()"
            class="nextMonth"
          >❯</span>
          <span
            @click="today()"
            class="today"
          >{{ $t('today') }}</span>
        </section>
        <!-- 日期 -->
        <div
          :class="{collapse:collapseDays}"
          class="calendar-days"
        >
          <!-- 星期 -->
          <ul class="week-header">
            <li
              v-for="(text,i) of weekHeader"
              :key="i"
              class="day"
            >
              {{ getEn(text) }}
            </li>
          </ul>
          <ul
            v-for="(week,i) of days"
            :key="i"
            :class="{select:isSelectWeek(week)}"
            class="week"
          >
            <li
              v-for="(day,j) of week"
              :key="j"
              :class="{'other-month':day.prevMonth || day.nextMonth,'today':day.isToday,'select':isSelect(day),'task':isTask(day)}"
              @click="selectDay(day)"
              class="day"
            >
              <span>{{ day.sDay }}</span>
            </li>
          </ul>
        </div>
      </div>
      <section
        v-show="collapseDays"
        @click="collapseDays=false;"
        class="collapse-btn"
      >
        {{ $t('_calendar.open') }}
        <span class="top-span">﹀</span>
      </section>
      <section
        v-show="!collapseDays"
        @click="collapseDays = true;"
        class="collapse-btn"
      >
        {{ $t('retract') }}
        <span class="bottom-span">︿</span>
      </section>
      <!-- 选中的日程 -->
      <section
        class="calendar-tasks"
        style="max-height:160px;overflow:auto;"
      >
        <section
          v-for="item in currentTasks"
          :key="item"
          :title="item.CALENDAR_TITLE"
          v-show="showList"
          class="task"
        >
          <span
            :style="{background:item.CALENDAR_COLOR}"
            class="type"
          >{{ lang=='zh_CN'?'日程':'Schedule' }}</span>
          <span
            @click="editCal(item)"
            class="text"
          > {{ item.CALENDAR_TITLE }}</span>
        </section>
      </section>
    </el-card>
  </div>
</template>
<script>
import calendar from './calendar.js';

export default calendar;
</script>
